{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
  <!-- 改用CDN引入Font Awesome以确保可用性 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- 引入湘西西风格字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
  <title>{% block title %}湘行{% endblock %}</title>
  <style>
    /* 统一色彩系统 */
    :root {
        --primary-brown: #8B4513; /* 木质建筑棕 */
        --primary-green: #2F4F4F; /* 沱江青绿色 */
        --accent-red: #9E2A2B; /* 苗族服饰红 */
        --accent-blue: #1A3A59; /* 蜡染蓝 */
        --light-bg: #F5F1E9; /* 米白色底 */
        --wood-tone: #D2B48C; /* 木色边框 */
    }

    /* 统一导航栏样式 */
    .sub-header{
        height: 50px;
        background-image: url("{% static 'img/border-pattern.png' %}"); /* 苗族织锦边框 */
        background-repeat: repeat-x;
        background-position: bottom;
        background-size: 120px 8px;
        margin-bottom: 30px;
    }
    .container{
        width: 1128px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sub-header .logo{
        width: 234px;
        height: 70px;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .sub-header .logo a{
        color: var(--primary-brown);
        text-decoration: none;
    }
    .sub-header .menu-list{
        height: 50px;
        line-height: 50px;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .sub-header .menu-list a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
        position: relative;
        font-weight: 500;
    }
    .sub-header .menu-list a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10px;
        width: 0;
        height: 2px;
        background-color: var(--accent-red);
        transition: width 0.3s;
    }
    .sub-header .menu-list a:hover{
        color: var(--accent-red);
        text-decoration: none;
    }
    .sub-header .menu-list a:hover::after {
        width: calc(100% - 20px);
    }
    .sub-header .menu-list a.active {
        color: var(--accent-red);
    }
    .sub-header .menu-list a.active::after {
        width: calc(100% - 20px);
    }
    .sub-header .logon{
        height: 50px;
        line-height: 50px;
        width: 234px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .sub-header .logon a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
    }
    .sub-header .logon a:hover{
        color: var(--accent-red);
        text-decoration: none;
    }
    .sub-header .name{
        color: var(--primary-brown);
        font-size: 24px;
        font-family: "Ma Shan Zheng", cursive;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    /* 基础样式 */
    body {
      background-color: var(--light-bg);
      color: #333;
      font-family: "Noto Serif SC", serif;
      line-height: 1.8;
    }

    /* 移动端菜单 */
    .mobile-menu-button {
      display: none;
      float: right;
      margin-top: 15px;
      background: none;
      border: none;
      color: var(--primary-brown);
      font-size: 24px;
    }

    /* 移动端导航 */
    #mobile-menu {
        background-color: white;
        border-top: 1px solid var(--wood-tone);
    }

    #mobile-menu a {
        color: var(--primary-brown);
        display: block;
        padding: 10px 15px;
        text-decoration: none;
    }

    #mobile-menu a:hover,
    #mobile-menu a.active {
        color: var(--accent-red);
        background-color: rgba(210, 180, 140, 0.1);
    }

    /* 添加一些辅助样式 */
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #8B4513;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 子页面内容区域样式 */
    .page-content {
      min-height: calc(100vh - 160px);
    }

    /* 用户下拉菜单样式 */
    .user-menu-container {
        position: relative;
        display: inline-block;
    }

    .user-dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 180px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        padding: 5px 0;
        margin: 5px 0 0;
        list-style: none;
        z-index: 1000;
        display: none;
        border: 1px solid #D2B48C;
    }

    .user-dropdown-menu li a {
        display: block;
        padding: 8px 15px;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        font-size: 14px;
    }

    .user-dropdown-menu li a:hover {
        background-color: rgba(210, 180, 140, 0.1);
        color: var(--accent-red);
    }

    .user-dropdown-menu .divider {
        height: 1px;
        margin: 5px 0;
        background-color: #eee;
    }

    .logout {
        color: #dc3545 !important;
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .container {
            width: 100%;
            padding: 0 15px;
        }
    }

    @media (max-width: 992px) {
        .sub-header .menu-list a {
            padding: 0 8px;
            font-size: 14px;
        }
    }

    @media (max-width: 768px) {
        .sub-header .container {
            flex-wrap: wrap;
        }

        .mobile-menu-button {
            display: block;
        }

        .sub-header .menu-list {
            display: none;
        }

        .sub-header .logon {
            width: auto;
            margin-left: auto;
        }

        #mobile-menu {
            display: none;
            width: 100%;
        }

        #mobile-menu.show {
            display: block;
        }
    }
  </style>
  {% block extra_css %}{% endblock %}
</head>
<body>
  <script>
    window.isAuthenticated = {% if user.is_authenticated %}true{% else %}false{% endif %};
    window.userId = {% if user.is_authenticated %}{{ user.id }}{% else %}null{% endif %};
  </script>
  <!-- 顶部导航栏 -->
  <header class="sub-header">
      <div class="container">
          <!-- 移动端菜单按钮 -->
          <button class="mobile-menu-button" id="mobile-menu-button">
              <i class="fas fa-bars"></i>
          </button>

          <div class="logo">
              <a href="/search/">
                  <!-- 吊脚楼图标 -->
                  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                      <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"></path>
                  </svg>
                  <span class="name">湘行</span>
              </a>
          </div>
          <div class="menu-list">
              <a href="/search/">首页</a>
              <a href="/user/strategy/" class="{% if request.path == '/user/strategy/' %}active{% endif %}">攻略笔记</a>
              <a href="/travel/group/">旅游团</a>
              <a href="{% url 'house' %}">酒店/民宿</a>
              <a href="{% url 'travel' %}">出行</a>
              <a href="{% url 'itinerary' %}">我的行程</a>
          </div>

          <!-- 用户操作区 -->
          <div class="logon">
              {% if user.is_authenticated %}
                  <!-- 用户已登录时显示用户菜单 -->
                  <a href="/user/message/reminder/" class="relative ">
                      <i class="far fa-bell" ></i>
                  </a>

                  <!-- 用户菜单容器 -->
                  <div class="user-menu-container">
                      <a class="user-menu-trigger" style="display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 0 10px; color: var(--primary-brown); text-decoration: none;">
                          <span class="user-avatar" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: inline-block; vertical-align: middle; background-size: cover; background-position: center; border: 2px solid #D4AF37; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); background-image: url('{% static 'img/4.jpg' %}');"></span>
                          <span>{{ user.username }}</span>
                      </a>
                      <ul class="user-dropdown-menu">
                          <li><a href="/user/profile/">个人中心</a></li>
                          <li><a href="/user/collections/">我的收藏</a></li>
                          <li><a href="/itinerary/">我的行程</a></li>
                          <li><a href="/user/settings/">设置</a></li>
                          <li class="divider"></li>
                          <li><a href="/user/logout/" class="logout">退出登录</a></li>
                      </ul>
                  </div>
              {% else %}
                  <!-- 用户未登录时显示登录注册按钮 -->
                  <a href="/user/login/">登录</a>
                  <a href="/register/">注册</a>
                  <a href="/user/message/reminder/" class="relative">
                      <i class="far fa-bell"></i>
                      <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">6</span>
                  </a>
              {% endif %}
          </div>
      </div>
  </header>

  <!-- 移动端菜单 -->
  <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
      <div class="container mx-auto px-4 py-3 space-y-3">
          <a href="/search/" class="block py-2 text-neutral-500 hover:text-primary">首页</a>
          <a href="/user/strategy/" class="block py-2 text-neutral-500 hover:text-primary {% if request.path == '/user/strategy/' %}active{% endif %}">攻略笔记</a>
          <a href="/travel/group/" class="block py-2 text-neutral-500 hover:text-primary">旅游团</a>
          <a href="{% url 'house' %}" class="block py-2 text-neutral-500 hover:text-primary">酒店/民宿</a>
          <a href="{% url 'travel' %}" class="block py-2 text-neutral-500 hover:text-primary">出行</a>
          <a href="{% url 'itinerary' %}" class="block py-2 text-neutral-500 hover:text-primary">我的行程</a>

          <!-- 移动端用户菜单 -->
          {% if user.is_authenticated %}
          <div class="border-t pt-3 mt-3">
              <div class="user-menu-container">
                  <a class="user-menu-trigger" style="display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 10px 0; color: var(--primary-brown); text-decoration: none;">
                      <span class="user-avatar" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: inline-block; vertical-align: middle; background-size: cover; background-position: center; border: 2px solid #D4AF37; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); background-image: url('{% static 'img/4.jpg' %}');"></span>
                      <span>{{ user.username }}</span>
                  </a>
                  <ul class="user-dropdown-menu" style="position: relative; background-color: white; padding: 2px 0; margin: 5px 0 0; list-style: none; display: none;">
                      <li><a href="/user/profile/" style="display: block; padding: 8px 15px; color: #333; text-decoration: none;">个人中心</a></li>
                      <li><a href="/user/collections/" style="display: block; padding: 8px 15px; color: #333; text-decoration: none;">我的收藏</a></li>
                      <li><a href="/itinerary/" style="display: block; padding: 8px 15px; color: #333; text-decoration: none;">我的行程</a></li>
                      <li><a href="/user/settings/" style="display: block; padding: 8px 15px; color: #333; text-decoration: none;">设置</a></li>
                      <li class="divider" style="height: 1px; margin: 5px 0; background-color: #eee;"></li>
                      <li><a href="/user/logout/" class="logout" style="color: #dc3545; padding: 8px 15px; display: block; text-decoration: none;">退出登录</a></li>
                  </ul>
              </div>
          </div>
          {% else %}
          <div class="border-t pt-3 mt-3 flex space-x-4">
              <a href="/user/login/" class="text-neutral-500 hover:text-primary transition-colors">登录</a>
              <a href="/register/" class="text-neutral-500 hover:text-primary transition-colors">注册</a>
          </div>
          {% endif %}
      </div>
  </div>

  <!-- 主要内容区域 -->
  <div class="page-content">
    {% block content %}{% endblock %}
  </div>

  <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
  <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
  <script>
    // 移动端菜单切换
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
        mobileMenu.classList.toggle('show');
    });

    // 检查Font Awesome是否加载成功
    window.addEventListener('load', function() {
        setTimeout(function() {
            const testIcon = document.createElement('i');
            testIcon.className = 'fas fa-check';
            testIcon.style.display = 'none';
            document.body.appendChild(testIcon);

            // 检查图标是否能正常显示
            const isFontAwesomeLoaded = window.getComputedStyle(testIcon).fontFamily.indexOf('FontAwesome') !== -1;
            if (!isFontAwesomeLoaded) {
                console.warn('Font Awesome未加载成功，尝试备用方案...');
                // 动态加载备用CDN
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';
                document.head.appendChild(link);
            }
            document.body.removeChild(testIcon);
        }, 1000);
    });

    // 用户菜单功能实现
    document.addEventListener('DOMContentLoaded', function() {
        const userMenuTriggers = document.querySelectorAll('.user-menu-trigger');

        userMenuTriggers.forEach(trigger => {
            const userDropdownMenu = trigger.nextElementSibling;

            // 点击用户头像或名称时切换下拉菜单显示状态
            trigger.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                userDropdownMenu.style.display = userDropdownMenu.style.display === 'block' ? 'none' : 'block';
            });
        });

        // 点击页面其他地方关闭所有下拉菜单
        document.addEventListener('click', function() {
            document.querySelectorAll('.user-dropdown-menu').forEach(menu => {
                menu.style.display = 'none';
            });
        });

        // 防止点击下拉菜单内部时关闭菜单
        document.querySelectorAll('.user-dropdown-menu').forEach(menu => {
            menu.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });
    });
  </script>
  {% block extra_js %}{% endblock %}
</body>
</html>